<template>
  <div class="chart-container app-container nohead">
    <div id="chart" style="height: 530px; margin-top: 30px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import ecStat from "echarts-stat";
import resize from "../mixins/resize";
export default {
  name: "extend-graphDemo-echartsScatter",
  mixins: [resize],
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById("chart"));
      var data = [
        [20, 60],
        [5, 11],
        [4, 19],
        [20, 80],
        [45, 90],
        [22, 34],
        [56, 78],
        [34, 66],
        [45, 90],
        [60, 89],
        [65, 120],
        [43, 87],
        [34, 65],
        [34, 45],
        [53, 87],
        [21, 39],
        [32, 76],
        [12, 54],
        [28, 73],
        [38, 87],
        [23, 24],
        [34, 65],
        [45, 43],
        [78, 100],
        [68, 72],
        [38, 70],
        [43, 72],
        [60, 93],
        [28, 58],
        [28, 54],
        [65, 98],
        [45, 80],
        [12, 30],
        [60, 94],
        [43, 63],
        [68, 102],
        [44, 89],
        [20, 48.32],
        [12, 38.78],
        [45, 78.49],
        [46.34, 88.49],
        [36.34, 65.49],
        [23.34, 43.34],
        [54.34, 98.34],
        [68.34, 106.49],
        [56.32, 91.34],
        [5.34, 31.49],
        [43.34, 74.34],
        [43.34, 76.49],
        [60.34, 99.49],
        [32.34, 65.49],
        [23.34, 54.79],
        [17.34, 43.49],
        [19.34, 45.49],
        [56.34, 88.49],
        [26.34, 65.49],
        [27.34, 85.49],
        [64.34, 110.49],
        [22, 45],
      ];
      var myRegression = ecStat.regression("linear", data);
      myRegression.points.sort(function (a, b) {
        return a[0] - b[0];
      });
      var option = {
        title: {
          text: "汽车速度与刹车距离",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "value",
          name: "汽车速度",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "刹车距离",
          min: 1.5,
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "scatter",
            type: "scatter",
            label: {
              emphasis: {
                show: true,
                position: "left",
                textStyle: {
                  color: "blue",
                  fontSize: 16,
                },
              },
            },
            data: data,
          },
          {
            name: "line",
            type: "line",
            showSymbol: false,
            data: myRegression.points,
            markPoint: {
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
              label: {
                normal: {
                  show: true,
                  position: "left",
                  formatter: myRegression.expression,
                  textStyle: {
                    color: "#333",
                    fontSize: 14,
                  },
                },
              },
              data: [
                {
                  coord: myRegression.points[myRegression.points.length - 1],
                },
              ],
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>
